<template>
  <MainLayout>
    <section class="threeD-header">
      <div class="container">
        <div class="threeD-header-title">3D配置器设计说明</div>
        <div class="threeD-header-content">
          探索各种交互式3D配置器，并深入了解它们是如何创建的。完成设计过程的关键步骤。阅读项目给生产团队和用户的工作流程带来的好处。
        </div>
      </div>
    </section>
    <section class="threeD-content">
      <div class="container">
        <div class="threeD-list">
          <div class="threeD-item" v-for="(item, index) in forumList" :key="item.title">
            <div class="threeD-item-inner">
              <img class="threeD-item-img" :src="`/images/resources/3d/${index + 1}.jpg`" alt="" />
              <div class="threeD-item-title">{{ item.title }}</div>
              <div class="threeD-item-btn">了解更多</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img
          class="img-section-img cursor"
          @click="jump('/business/contact')"
          src="/images/resources/3d/13.jpg"
          alt=""
        />
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  import { ref } from "vue";

  const forumList = ref([
    {
      title: "空调装置",
      content: "",
    },
    {
      title: "太阳能电池板",
      content: "",
    },
    {
      title: "移动电源",
      content: "",
    },
    {
      title: "多氯联苯",
      content: "",
    },
    {
      title: "设计师包",
      content: "",
    },
    {
      title: "充电器",
      content: "",
    },
    {
      title: "站立式办公桌",
      content: "",
    },
    {
      title: "照明/灯",
      content: "",
    },
    {
      title: "自行车鞋",
      content: "",
    },
    {
      title: "珠宝",
      content: "",
    },
    {
      title: "背包",
      content: "",
    },
    {
      title: "百叶窗",
      content: "",
    },
  ]);
  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .threeD-header {
    padding: $spacing-xxl 0;

    .container {
      .threeD-header-title {
        font-size: 70px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 10px;
      }
      .threeD-header-content {
        font-size: 16px;
        color: #585858;
        text-align: center;
      }

      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-header-title {
          font-size: 48px;
          letter-spacing: 6px;
        }
        .threeD-header-content {
          margin-top: 20px;
          font-size: 14px;
        }
      }
      @media (max-width: $breakpoint-mobile) {
        .threeD-header-title {
          font-size: 36px;
          letter-spacing: 4px;
        }
      }
    }
  }

  .threeD-content {
    padding: 25px 0 60px;
    .container {
      .threeD-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        gap: 30px;
        .threeD-item {
          width: calc(33.33% - 30px);
          border-radius: 14px;
          .threeD-item-inner {
            width: 100%;
            height: 100%;
            .threeD-item-img {
              width: 100%;
              border-radius: 14px;
              object-fit: cover;
            }
            .threeD-item-title {
              padding: 30px 0;
              font-size: 30px;
              font-weight: 500;
              color: #000;
            }
            .threeD-item-btn {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 10px 20px;
              font-size: 16px;
              width: fit-content;
              border: 1px solid #703ffa;
              color: #703ffa;
              border-radius: 10px;
              cursor: pointer;
              transition: all 0.3s ease-in-out;
              &:hover {
                background-color: #703ffa;
                color: #fff;
              }
            }
          }
        }
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-list {
          gap: 20px;
          .threeD-item {
            width: calc(50% - 20px);
            .threeD-item-inner {
              .threeD-item-title {
                padding: 20px 0;
              }
              .threeD-item-title {
                font-size: 26px;
              }
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-list {
          gap: 10px;
          .threeD-item {
            width: 100%;
            padding: 8px;
            .threeD-item-inner {
              .threeD-item-title {
                padding: 15px 0;
              }
              .threeD-item-btn {
                padding: 10px 20px;
                font-size: 16px;
              }
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-list {
          gap: 10px;
          .threeD-item {
            .threeD-item-inner {
              .threeD-item-btn {
                padding: 6px 12px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }

  .img-section {
    padding: 20px 0 40px;
    .container {
      .img-section-img {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
        &.cursor {
          cursor: pointer;
        }
      }
    }
  }
</style>
